<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://zlzkj.com/tags" prefix="z" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>监控管理</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style type="text/css">
        .wr_echarts_bar{
            padding:9px 5px 10px 0;
            height:auto;
            float: left;
            margin: 0;
        }
        .wr_echarts_bar_border{
            box-shadow: 0px 0px 1px 1px rgba(161, 159, 159, 1);
            border-radius: 2px;
            background-color: #ffffff;
            padding:9px 5px 10px 0;
            margin-bottom: 20px;
            height:350px;
            width:100%;
            position: relative;
        }
        .wr_echarts_bar_show{
            height:100%;
            width:100%;
            position: absolute;
        }
    </style>
</head>
<body>
	<div class="templatemo-content col-1 light-gray-bg">
	    <div class="templatemo-content-container">
	        <div class="templatemo-content-widget no-padding">
	            <div class="zlzkj_item_content table-responsive">
	            	<div class="modal-header">
                    	<div class="text-info"><p>实时监控</p></div>
                	</div>
                	<div class="col-sm-12 col-xs-12 col-md-12 col-lg-12">
                		<div class="wr_echarts_bar col-sm-12 col-xs-12 col-md-12 col-lg-12">
                			<button type="button" class="btn btn-success" id="btn_line">折线图</button>
                			<button type="button" class="btn btn-default" id="btn_bar">柱状图</button>
                			<button type="button" class="btn btn-default" id="btn_pie">饼状图</button>
                		</div>
                		<div class="wr_echarts_bar_border col-sm-12 col-xs-12 col-md-12 col-lg-12">
                			<div id="echarts_bar_show" class="wr_echarts_bar_show col-sm-12 col-xs-12 col-md-12 col-lg-12"></div>
                		</div>
                	</div>
	            </div>
	        </div>
	    </div>
	</div>

    <script type="text/javascript">
	var myChart = echarts.init(document.getElementById('echarts_bar_show'));
	/* 第一个图  折线图   */
	var option = {
	        title: {
	            text: '2018年鼎力电能消耗'
	        },
	        tooltip: {},
	        legend: {
	            data:['电量']
	        },
	        xAxis: {
	        	data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 
	        	show: true,
	        },
	        yAxis: {
	        	show: true,
	        },
	        series: [{
	            name: '电量',
	            type: 'line',
	            symbol: 'circle',     //设定为实心点
                symbolSize: 10,   //设定实心点的大小
	            itemStyle: { normal: { color: '#5CB85C' } },
	        }]
	};
	
	/* 第二个图  柱状图   */
	option2 = null;
	var dataAxis = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''];
	var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
	var yMax = 500;
	var dataShadow = [];
	
	for (var i = 0; i < data.length; i++) {
	    dataShadow.push(yMax);
	}
	
	option2 = {
	    title: {
	    	text: '2018年鼎力电能消耗',
	    },
	    legend: {
            data:['电量']
        },
	    xAxis: {
	        data: dataAxis,
	        axisLabel: {
	            inside: true,
	            textStyle: {
	                color: '#fff'
	            }
	        },
	        axisTick: {
	            show: false
	        },
	        axisLine: {
	            show: false
	        },
	        z: 10
	    },
	    yAxis: {
	        axisLine: {
	            show: false
	        },
	        axisTick: {
	            show: false
	        },
	        axisLabel: {
	            textStyle: {
	                color: '#999'
	            }
	        }
	    },
	    dataZoom: [
	        {
	            type: 'inside'
	        }
	    ],
	    series: [
	        {
	        	name: '电量',
	            type: 'bar',
	            itemStyle: {
	                normal: {
	                    color: new echarts.graphic.LinearGradient(
	                        0, 0, 0, 1,
	                        [
	                            {offset: 0, color: '#83bff6'},
	                            {offset: 0.5, color: '#188df0'},
	                            {offset: 1, color: '#188df0'}
	                        ]
	                    ),
	                    label: {
	                    	show: true, position: 'top'
	                    	}
	                },
	                emphasis: {
	                    color: new echarts.graphic.LinearGradient(
	                        0, 0, 0, 1,
	                        [
	                            {offset: 0, color: '#2378f7'},
	                            {offset: 0.7, color: '#2378f7'},
	                            {offset: 1, color: '#83bff6'}
	                        ]
	                    )
	                }
	            },
	        }
	    ]
	};
	
	/* 第三个图  饼状图   */
	
	var option3 = {
	        title: {
	            text: '2018年鼎力电能消耗'
	        },
	        tooltip: {},
	        legend: {
	            data:['电量']
	        },
	        xAxis: {
	        	data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 
	        	show:false,
	        
	        },
	        yAxis: {
	        	show:false,
	        },
	        series: [{
	            name: '电量',
	            type: 'pie',
	            itemStyle:{ 
                    normal:{ 
                        label:{ 
                           show: true, 
                           formatter: '{b} : {c} ({d}%)' 
                        }, 
                        labelLine :{show:true}
                    } 
                }
	        }]
	};

    // 使用刚指定的配置项和数据显示图表。
    loadDATE(option);
	myChart.setOption(option, true);
	window.addEventListener("resize",function(){
	myChart.resize();
	});
	
	//点击折线图
	$("#btn_line").click(function () {
		$('#btn_line').removeClass();
		$('#btn_bar').removeClass(); 
		$('#btn_pie').removeClass();
		$(this).addClass("btn btn-success");
		$('#btn_bar').addClass("btn btn-default");
		$('#btn_pie').addClass("btn btn-default");
		
		loadDATE(option);
		myChart.setOption(option, true);

	});
	
	//点击柱状图
	$("#btn_bar").click(function () {
		$('#btn_line').removeClass();
		$('#btn_bar').removeClass(); 
		$('#btn_pie').removeClass();
		$(this).addClass("btn btn-success");
		$("#btn_line").addClass("btn btn-default");
		$('#btn_pie').addClass("btn btn-default");
		
		loadDATE(option2);
		myChart.setOption(option2, true);
	});
	
	//点击饼状图
	$("#btn_pie").click(function () {
		$('#btn_line').removeClass();
		$('#btn_bar').removeClass(); 
		$('#btn_pie').removeClass();
		$(this).addClass("btn btn-success");
		$('#btn_bar').addClass("btn btn-default");
		$("#btn_line").addClass("btn btn-default");
		
		loadDATE(option3);
		myChart.setOption(option3, true);
	});
	
	function loadDATE(option){
		  $.ajax({

		    type:"post",
		    async:false,
		    url:"form/index",
		    data:{},
		    dataType:"json",
		    success:function(result){
		      
		      if(result){
		        option.series[0].data=[];
		        for(var i=0;i<result.length;i++)
		          option.series[0].data.push(result[i].consumption);
		      }         
		    }
		  });
		}
</script>
</body>
</html>